<template>
  <div class="wrap">
    <div class="header">
      <i class="wyy wyy-yuanquan"></i>
      <span>个性化推荐</span>
      <span class="more" @click="$router.push('/songlist')">
        更多<i class="wyy wyy-jiantou"></i>
      </span>
    </div>
    <div class="personalize">
      <ul>
        <li class="first">
          <div class="time">
            <div class="week">{{ week }}</div>
            <div class="day">{{ date }}</div>
          </div>
          <a href="">每日歌单推荐</a>
          <p>根据你的口味生成，每天6:00更新</p>
        </li>
        <li v-for="item in songList" :key="item.id">
          <SongItem :songPlayList="item"></SongItem>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import SongItem from '@/components/SongItem/index'
import { getPersonalMusic } from '@/api/recommend.js'
export default {
  name: 'Personalixe',
  components: {
    SongItem
  },
  data () {
    return {
      songList: [],
      date: null,
      week: null
    }
  },
  created () {
    this.getTime()
    this.getPersonalMusic()
  },
  methods: {
    async getPersonalMusic () {
      const res = await getPersonalMusic()
      this.songList = res.data.recommend.slice(0, 3)
    },
    getTime () {
      const now = new Date()
      const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      this.week = weeks[now.getDay()]
      this.date = now.getDate()
    }
  }
}
</script>

<style lang="less" scoped>
.wrap {
  padding: 0 20px;
  margin: 22px 0 30px 0;
  .header {
    border-bottom: 4px solid #C10D0C;
    .wyy-yuanquan {
      color: #C10D0C;
    }
    span {
      margin-left: 10px;
      font-size: 20px;
      color: #333;
    }
    .more {
      margin-top: 10px;
      float: right;
      font-size: 12px;
      color: #666;
      i {
        color: #C10D0C;
        font-weight: 600;
        vertical-align: middle;
      }
    }
  }
  .personalize {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      li {
        width: 140px;
        height: 200px;
        margin-top: 15px;
      }
      .first {
        text-align: center;
        .time {
          background-color: pink;
          width: 140px;
          height: 140px;
          border-radius: 10px;
          text-align: center;
          .week {
            height: 33px;
            line-height: 33px;
            background-color: #D23A3A;
            text-shadow: 0 -1px #962626;
            font-size: 14px;
            color: #fed9d9;
            border-radius: 10px 10px 0 0;
          }
          .day {
            height: 107px;
            line-height: 105px;
            font-size: 88px;
            font-weight: 700;
            background-color: #EFEFEF;
            border-radius: 0 0 10px 10px;
            text-shadow: 0 -1px ;
            text-shadow: 3px 5px 5px #656B79;
            box-shadow: 3px 5px 5px #656B79;
          }
        }
        a {
          font-size: 14px;
          color: #000;
        }
        a:hover {
          text-decoration:underline;
        }
        p {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>
